<template >
    <el-row>
        <el-col :span="24">
            <el-menu default-active="1-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <Avatar />
                        </el-icon>
                        <span>用户管理</span>
                    </template>
                    <el-menu-item index="1-1" @click="$router.push({ path: '/admin/userInfo' })">用户管理</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon>
                            <Shop />
                        </el-icon>
                        <span>商家管理</span>
                    </template>
                    <el-menu-item index="2-1" @click="$router.push({ path: '/admin/businessInfo' })">商家管理</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="3">
                    <template #title>
                        <el-icon>
                            <GoodsFilled />
                        </el-icon>
                        <span>商品管理</span>
                    </template>
                    <el-menu-item index="3-1" @click="$router.push({ path: '/admin/productInfo' })">商品管理</el-menu-item>
                    <el-menu-item index="3-2" @click="$router.push({ path: '/admin/categoryInfo' })">分类管理</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="4">
                    <template #title>
                        <el-icon>
                            <List />
                        </el-icon>
                        <span>订单管理</span>
                    </template>
                    <el-menu-item index="4-1" @click="$router.push({ path: '/admin/ordersInfo' })">订单管理</el-menu-item>
                    <el-menu-item index="4-2" @click="$router.push({ path: '/admin/commentInfo' })">评论管理 </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-col>
    </el-row>
</template>
  
<script lang="ts" setup>
import {
    List,
    Avatar,
    GoodsFilled,
    Shop,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}
</script>
  
<style scoped></style>